<template>
  <t-row :gutter="[24, 24]">
    <t-col :flex="3">
      <t-card class="user-info-list" :title="t('pages.user.personalInfo.title')" :bordered="false">
        <t-form ref="submitFormRef" label-align="top" :data="submitForm"  @submit="submit">
          <t-row style="width: 100%" :gutter="[16,24]">
            <t-col :span="6">
              <t-form-item label="用户名" name="username">
                <t-input v-model="submitForm.username" :options="sexOptions" :placeholder="t('pages.sysUser.username')">
                </t-input>
              </t-form-item>
            </t-col>
            <t-col :span="6">
              <t-form-item label="性别" name="sex">
                <t-select v-model="submitForm.sex" :options="sexOptions" :placeholder="t('pages.sysUser.sex')">
                </t-select>
              </t-form-item>
            </t-col>
            <t-col :span="6">
              <t-form-item :label="t('pages.sysUser.nickname')" name="nickname">
                <t-input
                  v-model="submitForm.nickname"
                  :placeholder="t('pages.sysUser.nickname')"
                />
              </t-form-item>
            </t-col>
            <t-col :span="6">
              <t-form-item :label="t('pages.sysUser.phone')" name="phone">
                <t-input
                  v-model="submitForm.phone"
                  :placeholder="t('pages.sysUser.phone')"
                />
              </t-form-item>
            </t-col>
            <t-col :span="6">
              <t-form-item :label="t('pages.sysUser.email')" name="email">
                <t-input
                  v-model="submitForm.email"
                  class="form-item-content"
                  type="search"
                  :placeholder="t('pages.sysUser.email')"
                  :style="{ minWidth: '134px' }"
                />
              </t-form-item>
            </t-col>
            <t-col :span="6" >
              <t-form-item :label="t('pages.sysUser.remarks')" name="remarks">
                <t-textarea  v-model="submitForm.remarks" :placeholder="t('pages.sysUser.remarksPlaceholder')"/>
              </t-form-item>
            </t-col>
            <t-col :span="6" >
              <t-form-item :label="t('pages.sysUser.avatar')" name="avatar" >
               <s-upload style="width: 200px;" v-model:value="submitForm.avatar" type="image" value-type="data" :limit="1" :tip="t('pages.sysUser.avatarPlaceholder')" />
              </t-form-item>
            </t-col>
          </t-row>
          <t-button type="submit" style="float: right">提交</t-button>
          </t-form>
      </t-card>
    </t-col>
  </t-row>
</template>
<script setup lang="ts">
import { t } from '@/locales';
import { useUserStore } from '@/store';
import { fileView } from '@/api/upload';
import SUpload from '@/components/s-upload/index.vue';
import { searchParams, COLUMNS, FORM_RULES, sexOptions } from '@/pages/userList/props/index';
import { ref } from 'vue';
import { MessagePlugin, SubmitContext } from 'tdesign-vue-next';
import { updateUserApi } from '@/api/login';



const userStore = useUserStore();
const submitForm = ref(userStore?.userInfo || {});

const submit =async (ctx: SubmitContext) => {
  if (ctx.validateResult) {
    await updateUserApi(submitForm.value);
    MessagePlugin.success('修改成功！');
    userStore.getUserInfo();
  }
  
};

</script>

<style lang="less" scoped>

.t-descriptions {
  margin-top: 24px;
}
</style>